<template>
  <div class="main">
    <div class="main-top"></div>
    <div class="main-left">
      <TotalList></TotalList>
    </div>
    <div class="main-middle">
      <UsageRecordList></UsageRecordList>
    </div>
    <div class="main-right">
      <FeatureTotalList></FeatureTotalList>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import TotalList from "@/components/tableLeftComponyents/TotalList.vue";
import UsageRecordList from "@/components/tableLeftComponyents/UsageRecordList.vue";
import FeatureTotalList from "@/components/tableLeftComponyents/FeatureTotalList.vue";


</script>
<style lang="scss" scoped>
.main {
  position: relative;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2.04% 0% 3% 3.4%;
  color: rgb(255, 255, 255);

  &-top {
    position: absolute;
    top: 2.44%;
    left: 23.37%;
    // background-color: #df1212a5;
    width: 46.22%;
    height: 17.52%;
  }
  &-left {
    height: 100%;
    width: 16.31%;
    // background-color: #df1212a5;
  }
  &-middle {
    height: 36.86%;
    width: 30.08%;
  }
  &-right {
    height: 12.39%;
    width: 49.08%;
    margin-right: 1.51%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
  }
}
</style>
